<template>
  <div class="envelope-overlay" v-if="showEnvelope" @click="openEnvelope">
    <!-- 背景粒子效果 -->
    <div class="background-particles">
      <div class="particle" v-for="i in 30" :key="i" :style="getParticleStyle(i)"></div>
    </div>
    
    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="floating-element" v-for="i in 8" :key="i" :style="getFloatingStyle(i)">
        {{ getFloatingIcon(i) }}
      </div>
    </div>
    
    <div class="envelope-container">
      <!-- 页面标题：未打开与已打开时的油腻文案切换 -->
      <div class="envelope-page-title" :class="{ 'title-open': isContentVisible }">
        <span v-if="!isContentVisible">💌 这儿有一封土到掉渣的小情书，请温柔拆开，小心被甜到牙疼 💌</span>
        <span v-else>💕 {{ loveConfig?.girl?.name || '宝贝' }}，我爱你，爱到月亮都嫌我腻 💕</span>
      </div>
      <!-- 信封背景 -->
      <div class="envelope-background">
        <div class="envelope-body" :class="{ 'envelope-open': isFlapOpen }">
          <!-- 信封主体 -->
          <div class="envelope-main">
            <div class="envelope-pattern"></div>
          </div>
          
          <!-- 信封翻盖 -->
          <div class="envelope-flap" :class="{ 'flap-open': isFlapOpen }">
            <div class="flap-pattern"></div>
          </div>
          
          <!-- 信封侧边 -->
          <div class="envelope-side-left"></div>
          <div class="envelope-side-right"></div>
          
          <!-- 信封底部 -->
          <div class="envelope-bottom"></div>
          
          <!-- 信封装饰 -->
          <div class="envelope-decoration">
            <div class="stamp">💌</div>
            <div class="seal">💕</div>
            <div class="address-line">To: {{ loveConfig?.girl?.name || '宝贝' }}</div>
          </div>

          <!-- 左上角寄件人 -->
          <div class="from-line">From: {{ loveConfig?.boy?.name || '我' }}</div>

          <!-- 左下角邮票图片 -->
          <div class="postage-stamp" role="img" aria-label="postage stamp"></div>
        </div>
        
        <!-- 信封内容 -->
        <div class="envelope-content" :class="{ 'content-visible': isContentVisible }">
          <div class="letter">
            <div class="letter-header">
              <div class="letter-pattern"></div>
              <h2 class="letter-title">💕 {{ loveConfig?.girl?.name || '宝贝' }}，我爱你，爱到地老天荒都不到边 💕</h2>
            </div>
            <div class="letter-body">
              <p class="letter-text" v-for="(text, index) in letterTexts" :key="index" :style="{ animationDelay: (index * 0.2) + 's' }">
                {{ text }}
              </p>
            </div>
            <div class="letter-footer">
              <p class="letter-signature">爱你的 {{ loveConfig?.boy?.name || '我' }}</p>
              <p class="letter-date">{{ getCurrentDate() }}</p>
            </div>
          </div>
        </div>
        
        <!-- 爱心装饰 -->
        <div class="hearts-container">
          <div class="heart" v-for="i in 15" :key="i" :style="getHeartStyle(i)">💖</div>
        </div>
        
        <!-- 闪光效果 -->
        <div class="sparkles">
          <div class="sparkle" v-for="i in 8" :key="i" :style="getSparkleStyle(i)">✨</div>
        </div>
        
        <!-- 蝴蝶效果 -->
        <div class="butterflies">
          <div class="butterfly" v-for="i in 3" :key="i" :style="getButterflyStyle(i)">🦋</div>
        </div>
      </div>
      
      <!-- 点击提示 -->
      <div class="click-hint" :class="{ 'hint-fade': isHintVisible }">
        <p>💌 点击信封打开 💌</p>
      </div>
      
      <!-- 音乐提示 -->
      <div class="music-hint" v-if="!isMusicPlaying">
        <p>🎵 建议开启音乐获得最佳体验</p>
      </div>
    </div>
    

  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { loveConfig } from '../config/love-config.js'
import audioManager from '../utils/audioManager.js'

export default {
  name: 'EnvelopeAnimation',
  props: {
    showEnvelope: {
      type: Boolean,
      default: true
    }
  },
  emits: ['envelope-opened'],
  setup(props, { emit }) {
    const isFlapOpen = ref(false)
    const isContentVisible = ref(false)
    const isHintVisible = ref(false)
    const isMusicPlaying = ref(false)
    
    // 确保初始状态正确
    const resetEnvelopeState = () => {
      isFlapOpen.value = false
      isContentVisible.value = false
      console.log('信封状态重置：翻盖关闭，内容隐藏')
    }
    
    let hintInterval = null
    let musicInterval = null
    
    const letterTexts = [
      '欢迎来到我们的爱情世界',
      '这里有我们所有的美好回忆',
      '每一刻都因为有你而变得特别',
      '点击信封开始我们的浪漫之旅'
    ]
    
    const getCurrentDate = () => {
      const now = new Date()
      return now.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
    }
    
    const openEnvelope = async () => {
      if (isFlapOpen.value) return
      
      // 播放信封打开音效序列
      await audioManager.playEnvelopeSequence()
      
      // 打开信封翻盖
      isFlapOpen.value = true
      
      // 延迟显示内容
      setTimeout(() => {
        isContentVisible.value = true
      }, 800)
      
      // 延迟关闭动画
      setTimeout(() => {
        emit('envelope-opened')
      }, 5000)
    }
    
    const getHeartStyle = (index) => {
      return {
        left: Math.random() * 100 + '%',
        top: Math.random() * 100 + '%',
        animationDelay: Math.random() * 2 + 's',
        animationDuration: (Math.random() * 2 + 3) + 's',
        fontSize: (Math.random() * 8 + 12) + 'px',
        opacity: Math.random() * 0.4 + 0.6
      }
    }
    
    const getParticleStyle = (index) => {
      return {
        left: Math.random() * 100 + '%',
        top: Math.random() * 100 + '%',
        animationDelay: Math.random() * 3 + 's',
        animationDuration: (Math.random() * 4 + 6) + 's',
        opacity: Math.random() * 0.5 + 0.3,
        backgroundColor: ['#ff6b9d', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57'][Math.floor(Math.random() * 5)]
      }
    }
    
    const getSparkleStyle = (index) => {
      return {
        left: Math.random() * 100 + '%',
        top: Math.random() * 100 + '%',
        animationDelay: Math.random() * 2 + 's',
        animationDuration: (Math.random() * 3 + 4) + 's',
        fontSize: (Math.random() * 6 + 14) + 'px'
      }
    }
    
    const getButterflyStyle = (index) => {
      return {
        left: Math.random() * 100 + '%',
        top: Math.random() * 100 + '%',
        animationDelay: Math.random() * 2 + 's',
        animationDuration: (Math.random() * 4 + 8) + 's',
        fontSize: (Math.random() * 8 + 16) + 'px'
      }
    }
    
    const getFloatingStyle = (index) => {
      return {
        left: Math.random() * 100 + '%',
        top: Math.random() * 100 + '%',
        animationDelay: Math.random() * 3 + 's',
        animationDuration: (Math.random() * 5 + 10) + 's',
        fontSize: (Math.random() * 10 + 20) + 'px',
        opacity: Math.random() * 0.3 + 0.2
      }
    }
    
    const getFloatingIcon = (index) => {
      const icons = ['🌸', '🌺', '🌹', '🌷', '🌼', '🌻', '💐', '🎀']
      return icons[index % icons.length]
    }
    
    const startMusic = async () => {
      try {
        await audioManager.playMusic()
        isMusicPlaying.value = true
      } catch (error) {
        console.log('音乐播放失败:', error)
      }
    }
    
    onMounted(() => {
      // 初始化音效管理器
      audioManager.init()
      
      // 确保初始状态正确
      resetEnvelopeState()
      
      // 再次确保状态正确（延迟执行）
      setTimeout(() => {
        resetEnvelopeState()
        console.log('组件挂载完成，当前状态：', {
          isFlapOpen: isFlapOpen.value,
          isContentVisible: isContentVisible.value
        })
      }, 100)
      
      // 显示点击提示
      setTimeout(() => {
        isHintVisible.value = true
      }, 1000)
      
      // 闪烁提示
      hintInterval = setInterval(() => {
        isHintVisible.value = !isHintVisible.value
      }, 1500)
      
      // 自动播放音乐提示
      musicInterval = setInterval(() => {
        if (!isMusicPlaying.value) {
          startMusic()
        }
      }, 3000)
      
      // 点击任意位置开始音乐
      document.addEventListener('click', startMusic, { once: true })
    })
    
    onUnmounted(() => {
      if (hintInterval) {
        clearInterval(hintInterval)
      }
      if (musicInterval) {
        clearInterval(musicInterval)
      }
      document.removeEventListener('click', startMusic)
    })
    
    return {
      isFlapOpen,
      isContentVisible,
      isHintVisible,
      isMusicPlaying,
      letterTexts,
      openEnvelope,
      getHeartStyle,
      getParticleStyle,
      getSparkleStyle,
      getButterflyStyle,
      getFloatingStyle,
      getFloatingIcon,
      getCurrentDate,
      loveConfig
    }
  }
}
</script>

<style scoped>
.envelope-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: pointer;
  overflow: hidden;
}

/* 背景粒子 */
.background-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: float-particle 12s ease-in-out infinite;
  box-shadow: 0 0 10px currentColor;
}

@keyframes float-particle {
  0%, 100% {
    transform: translateY(0px) translateX(0px) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-60px) translateX(30px) scale(1.5);
    opacity: 0.8;
  }
}

/* 背景装饰 */
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.floating-element {
  position: absolute;
  animation: float-element 15s ease-in-out infinite;
}

@keyframes float-element {
  0%, 100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
    opacity: 0.2;
  }
  50% {
    transform: translateY(-40px) translateX(20px) rotate(180deg);
    opacity: 0.6;
  }
}

.envelope-container {
  position: relative;
  width: 450px;
  height: 350px;
  z-index: 10;
  margin-top: 36px;
}

/* 页面标题样式 */
.envelope-page-title {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 1.35rem;
  font-family: 'LoveFont', cursive;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  padding: 12px 22px;
  backdrop-filter: blur(10px);
  transition: all 0.6s ease;
  max-width: 90vw;
  line-height: 1.5;
  text-align: center;
  z-index: 10050;
  pointer-events: none;
}

.envelope-page-title.title-open {
  background: rgba(255, 255, 255, 0.25);
  transform: translateX(-50%) translateY(-2px) scale(1.03);
}

.envelope-background {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 信封主体 */
.envelope-body {
  position: relative;
  width: 350px;
  height: 250px;
  margin: 0 auto;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.envelope-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #f8f9fa, #e9ecef);
  border: 3px solid #dee2e6;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.envelope-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(255, 107, 157, 0.1) 2px, transparent 2px),
    radial-gradient(circle at 80% 80%, rgba(255, 107, 157, 0.1) 2px, transparent 2px);
  background-size: 30px 30px;
  opacity: 0.5;
}

/* 信封翻盖 */
.envelope-flap {
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(145deg, #e9ecef, #dee2e6);
  border: 3px solid #dee2e6;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  transform-origin: bottom;
  transform: rotateX(180deg) !important;
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 5;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.envelope-flap.flap-open {
  transform: rotateX(0deg) !important;
}

.flap-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(45deg, rgba(255, 107, 157, 0.1) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 107, 157, 0.1) 25%, transparent 25%);
  background-size: 20px 20px;
  opacity: 0.3;
}

/* 信封侧边 */
.envelope-side-left,
.envelope-side-right {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  z-index: 2;
  transition: transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
}

.envelope-side-left {
  left: -30px;
  border-width: 125px 30px 125px 0;
  border-color: transparent #dee2e6 transparent transparent;
  transform-origin: right center;
  transform: rotateY(-180deg) translateZ(0.1px);
}

.envelope-side-right {
  right: -30px;
  border-width: 125px 0 125px 30px;
  border-color: transparent transparent transparent #dee2e6;
  transform-origin: left center;
  transform: rotateY(180deg) translateZ(0.1px);
}

.envelope-open .envelope-side-left { transform: rotateY(8deg) translateZ(0.1px); }
.envelope-open .envelope-side-right { transform: rotateY(-8deg) translateZ(0.1px); }

/* 信封底部 */
.envelope-bottom {
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 100%;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 30px;
  border-color: transparent #dee2e6 #dee2e6 #dee2e6;
  z-index: 1;
  transform-origin: top;
  transform: rotateX(180deg) translateZ(0.1px);
  transition: transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
}

.envelope-open .envelope-bottom { transform: rotateX(-6deg) translateZ(0.1px); }

/* 信封装饰 */
.envelope-decoration {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 6;
  text-align: center;
}

.stamp {
  font-size: 28px;
  margin-bottom: 8px;
  animation: stamp-glow 2s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.seal {
  font-size: 24px;
  animation: seal-rotate 4s linear infinite;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.address-line {
  font-size: 0.8rem;
  color: #6c757d;
  font-family: 'LoveFont', cursive;
  margin-top: 5px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(0deg);
}

/* 寄件人信息（左上角） */
.from-line {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 0.9rem;
  color: #6c757d;
  font-family: 'LoveFont', cursive;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 6px 10px;
  z-index: 6;
  backdrop-filter: blur(4px);
}

/* 邮票图片（左下角） */
.postage-stamp {
  position: absolute;
  left: 15px;
  bottom: 15px;
  width: 56px;
  height: 56px;
  background-image: url('/public/heart.svg');
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border: 2px dashed rgba(0, 0, 0, 0.1);
  z-index: 6;
}

@keyframes stamp-glow {
  0%, 100% { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) brightness(1); }
  50% { filter: drop-shadow(0 4px 8px rgba(255, 107, 157, 0.3)) brightness(1.3); }
}

@keyframes seal-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 信封内容 */
.envelope-content {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  background: linear-gradient(145deg, #ffffff, #f8f9fa);
  border-radius: 8px;
  padding: 16px;
  opacity: 0 !important;
  transform: translateY(25px) scale(0.9);
  transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 107, 157, 0.1);
  pointer-events: none !important;
  visibility: hidden !important;
  display: none !important;
  max-height: 100%;
}

.envelope-content.content-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1);
  pointer-events: auto !important;
  visibility: visible !important;
  display: block !important;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* 信件样式 */
.letter {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.letter-header {
  text-align: center;
  margin-bottom: 25px;
  position: relative;
}

.letter-pattern {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ff6b9d, transparent);
  border-radius: 2px;
}

.letter-title {
  font-size: 1.8rem;
  color: #ff6b9d;
  margin: 0;
  font-family: 'LoveFont', cursive;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  animation: title-glow 3s ease-in-out infinite;
}

@keyframes title-glow {
  0%, 100% { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }
  50% { text-shadow: 0 0 15px rgba(255, 107, 157, 0.6); }
}

.letter-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 18px;
}

.letter-text {
  font-size: 1.1rem;
  color: #495057;
  margin: 0;
  text-align: center;
  line-height: 1.8;
  font-family: 'LoveFont', cursive;
  opacity: 0;
  animation: text-fade-in 0.8s ease forwards;
  position: relative;
}

.letter-text::before {
  content: '💕';
  position: absolute;
  left: -25px;
  opacity: 0.6;
  font-size: 0.8rem;
}

@keyframes text-fade-in {
  from { 
    opacity: 0; 
    transform: translateY(15px) scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

.letter-footer {
  text-align: right;
  margin-top: 25px;
  position: relative;
}

.letter-footer::before {
  content: '';
  position: absolute;
  top: -10px;
  right: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff6b9d);
  border-radius: 1px;
}

.letter-signature {
  font-size: 1.2rem;
  color: #ff6b9d;
  margin: 0;
  font-family: 'LoveFont', cursive;
  font-weight: bold;
}

.letter-date {
  font-size: 0.9rem;
  color: #6c757d;
  margin: 8px 0 0 0;
  font-family: 'LoveFont', cursive;
  font-style: italic;
}

/* 爱心装饰 */
.hearts-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.heart {
  position: absolute;
  animation: float-heart 6s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

@keyframes float-heart {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-35px) rotate(180deg) scale(1.2);
    opacity: 1;
  }
}

/* 闪光效果 */
.sparkles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  animation: sparkle-twinkle 4s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}

@keyframes sparkle-twinkle {
  0%, 100% { 
    opacity: 0; 
    transform: scale(0.3) rotate(0deg); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.2) rotate(180deg); 
  }
}

/* 蝴蝶效果 */
.butterflies {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.butterfly {
  position: absolute;
  animation: butterfly-fly 10s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

@keyframes butterfly-fly {
  0%, 100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
    opacity: 0.7;
  }
  25% {
    transform: translateY(-20px) translateX(15px) rotate(15deg);
    opacity: 1;
  }
  50% {
    transform: translateY(-40px) translateX(-10px) rotate(-15deg);
    opacity: 0.8;
  }
  75% {
    transform: translateY(-20px) translateX(20px) rotate(10deg);
    opacity: 1;
  }
}

/* 点击提示 */
.click-hint {
  position: absolute;
  bottom: -70px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  padding: 15px 30px;
  border-radius: 30px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  transition: all 0.6s ease;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 107, 157, 0.2);
}

.click-hint p {
  margin: 0;
  color: #495057;
  font-size: 1rem;
  font-weight: 500;
  font-family: 'LoveFont', cursive;
}

.click-hint.hint-fade {
  opacity: 0.7;
  transform: translateX(-50%) scale(0.95);
  box-shadow: 0 4px 12px rgba(255, 107, 157, 0.2);
}

/* 音乐提示 */
.music-hint {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 20px;
  border-radius: 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 107, 157, 0.1);
}

.music-hint p {
  margin: 0;
  color: #6c757d;
  font-size: 0.9rem;
  font-family: 'LoveFont', cursive;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .envelope-container {
    width: 320px;
    height: 280px;
  }
  
  .envelope-body {
    width: 280px;
    height: 180px;
  }
  
  .letter-title {
    font-size: 1.4rem;
  }
  
  .letter-text {
    font-size: 1rem;
  }
  
  .click-hint {
    bottom: -60px;
    padding: 12px 24px;
  }
  
  .click-hint p {
    font-size: 0.9rem;
  }
  
  .stamp {
    font-size: 24px;
  }
  
  .seal {
    font-size: 20px;
  }
}
</style>
